<template>
  <el-card>
    <div class="admin">
      <Header :pageOpts="pageOpts"
              @page-change="pageChange"
              @edit="edit" />
      <Table :rows="rows"
             :pageOpts="pageOpts"
             @page-change="pageChange"
             @action="action"
             @edit="edit" />
      <Page :pageOpts="pageOpts"
            @page-change="pageChange" />
    </div>
  </el-card>
</template>
<script>
import {
  getNewsList,
  addNews,
  updateNews,
  delNews,
  updateNewsStatus
} from "@/api/news";
import { NEWS_TYPE } from "@/static/type";
import Table from "./table";
import Page from "./page";
import Header from "./header";
export default {
  components: {
    Table,
    Page,
    Header
  },
  data() {
    return {
      rows: [],
      pageOpts: {
        type: 0,
        curPage: 1,
        limit: 10,
        total: 0,
        offset: 0,
        languageType: 0,
        search: {
          sort: "createTime",
          order: "desc",
          status: "0,1"
        }
      },
      news: {
        type: 1,
        sequence: 0,
        title: "",
        url: "",
        id: 0
      }
    };
  },
  async created() {
    await this.getNewsList();
  },
  methods: {
    async getNewsList() {
      const {
        rows,
        curPage,
        total,
        limit,
        sort,
        offset,
        search
      } = await getNewsList(this.pageOpts);

      this.rows = rows;
      this.pageOpts = {
        type: search.type,
        curPage,
        total,
        limit,
        offset,
        languageType: search.languageType,
        search: {
          status: search.status,
          order: search.order,
          sort: search.sort
        }
      };
    },
    async edit(news) {
      this.$router.push({
        name: "editNews",
        query: { id: news.id }
      });
    },
    pageChange(pageOpts) {
      this.pageOpts = pageOpts;
      this.getNewsList();
    },
    async action(news, type) {
      const text = {
        del: "删除成功",
        disable: "禁用成功",
        enable: "启用成功"
      };
      type === "del" && (await delNews(news.id));
      type === "disable" && (await updateNewsStatus(news.id, false));
      type === "enable" && (await updateNewsStatus(news.id, true));
      this.$message({
        message: text[type],
        type: "success",
        center: true
      });
      this.getNewsList();
    }
  }
};
</script>
<style lang="scss" scoped>
.admin {
  padding: 15px;
  .header {
    margin-bottom: 15px;
  }
}
</style>


